<template>
	<b-layout-index>

		<u-datetime-picker @cancel="show=false" @confirm="show=false" :closeOnClickOverlay="true" :show="show"
			v-model="value1" mode="year-month"></u-datetime-picker>
		<view class="color " :style="{ '--colorPrimary': color.primary }">
			<navbar :isStyle="light"  :title="$t('账单记录')"></navbar>

			<view class="mg-top-30">
				<view class="mg-10 pd-10 br-rd-10 bg-white">
					<u-cell :border="false">
						<view slot="title">
							<view class="w100 text-right">
								<!-- 	<view @click="show = true" class="btn pd-5 br-rd-30 flex" shape="circle" type="primary">
									<u-icon color="#fff" name="arrow-down" /><text> 2022年08月</text>
								</view> -->
							</view>
						</view>
						<view slot="value">{{$t('总金额')}}</view>
					</u-cell>

					<view>

						<u-row justify="space-between">
							<u-col span="6">
								<view class="grid grid1 pd-10 mg-5 br-rd-10">
									<view class="mg-top-10"><text
											class="font-bold font-size-18">{{info.income}}</text><text
											class="font-size-14">￥</text></view>
									<view class="mg-bottom-10"><text class="font-size-14">{{$t('收入')}}</text>
									</view>
								</view>
							</u-col>
							<u-col span="6">
								<view class="grid grid2  pd-10 mg-5 br-rd-10">
									<view class="mg-top-10"><text
											class="font-bold font-size-18">{{info.expenses}}</text><text
											class="font-size-14">￥</text></view>
									<view class="mg-bottom-10"><text class="font-size-14">{{$t('支出')}}</text>
									</view>
								</view>
							</u-col>

						</u-row>

					</view>

				</view>
			</view>
		</view>
		<view class="mg-10 pd-10 br-rd-10 bg-white">
			<u-tabs :list="list1" @click="click"></u-tabs>
		</view>


		<view class="mg-10 pd-10 br-rd-10 bg-white">
			<view class="mg-top-10 mg-bottom-10">

				<u-cell-group :border="false">

					<u-cell v-for="(item,index) in datalist" >
						<view slot="title" class="font-size-12 font-bold">{{icons[item.type].name}}</view>
						<view class="icon" slot="icon">
							<iconfont size="40" :color="icons[item.type]['color']" :icon="icons[item.type]['icon']" />
						</view>
						<view slot="value" class="ltr">
							<text class="font-bold"
								:class="item.state==1?'color-success':'color-price'">{{item.state==1?'+':'-'}}{{item.price}}</text>
						</view>
						<view slot="label" class="font-size-12 color-label">
							<view v-if="item.remark"> {{item.remark}}</view>
								<view v-if="item.orderUserName">{{$t("关系人")}}:{{item.orderUserName}}</view>
							<view class="color-label font-size-10">
								{{$u.timeFormat(item.createDate, 'yyyy-mm-dd hh:MM')}}
							</view>
						</view>
					</u-cell>

				</u-cell-group>
			
			</view>
	
		</view>
		<loading v-if="loading"/>
	</b-layout-index>
</template>

<script>
	import {
		findByIncomeAndExpenses,
		findByMyList
	} from "@/api/userWallet.js"
	export default {

		data() {
			return {
				show: false,
				value1: Number(new Date()),
				list1: [{
					name: this.$t("全部"),
					state: 0
				}, {
					name: this.$t("收入"),
					state: 1
				}, {
					name: this.$t("支出"),
					state: 2
				}],
				info: {
					expenses: 150,
					income: 0
				},
				datalist: [],
				icons: {
					0: {
						icon: "icon-yusuantiaozheng",
						color: "green",
						name: this.$t("提现")
					},
					1: {
						icon: "icon-yusuantiaozheng",
						color: "green",
						name: this.$t("离开代理的利润")
					},
					2: {
						icon: "icon-yusuantiaozheng",
						color: "red",
						name: this.$t("离开产品的利润")
					},
					3: {
						icon: "icon-yusuantiaozheng",
						color: "red",
						name:  this.$t("提现金额")
					},
					4: {
						icon: "icon-yusuantiaozheng",
						color: "green",
						name: this.$t("提现金额")
					},
					7: {
						icon: "icon-yusuantiaozheng",
						color: "green",
						name: this.$t("转账金额")
					},
					8: {
						icon: "icon-yusuantiaozheng",
						color: "green",
						name: this.$t("账号余额购买")
					}
				},
				page: 0,
				status: 0,
				loading:false
			}
		},
		onLoad: function() {
			this.getInfo()
			this.status = 0;
			this.findByMyListData()
		},
		onPullDownRefresh: function(e) {
			console.log("onPullDownRefresh", e)
		},
		onReachBottom: function() {
			console.log("LLLLLL Up")
			if (this.page != -1) {
				//this.datalist = []
				this.page = this.page + 1;
				this.findByMyListData();
			}
		},
		methods: {
			getInfo: function() {
				findByIncomeAndExpenses().then(res => {
					this.info = res

				})

			},
			findByMyListData: function() {
				var the = this;
				the.loading=true;
				var param = {
					state: the.status,
					page: the.page
				}
				var datalist = the.datalist;
				findByMyList(param).then(res => {
					console.log(res)
					if (res.length < 10) {
						the.page = -1;
					}
					if (datalist.length > 0) {
						for (var i = 0; i < res.length; i++) {
							var item = res[i]
							datalist.push(item)
						}
					} else {
						datalist = res;
					}
					console.log(datalist)
					the.datalist = datalist
						the.loading=false;

				}).catch(e=>{
						the.loading=false;
				})
			},
			click: function(e) {
				console.log(e)
				this.status = e.state;
				this.page = 0;
				this.datalist = []
				this.findByMyListData()
			}
		}
	}
</script>

<style lang="scss">
	.w100 {
		width: 110px;
	}

	.btn {
		background-color: var(--color-primary);
		text-align: center;
		color: #fff;
	}

	.flex {
		display: flex;
		justify-content: space-between;
	}

	.grid {
		box-shadow: 0 0 4px 1px #eee;
		text-align: center;
	}

	.grid1 {
		background-color: var(--color-primary);
		color: #fff;
	}

	.grid2 {
		background-color: $u-warning;
		color: #fff;
	}

	.color {
		background-image: linear-gradient(to bottom, var(--color-primary), var(--color-primary), #ffffff, #eeeeee);
	}

	.m {
		margin-top: 100px;
	}

	.bgbbw {
		background-color: #ffffffa6;
	}

	.icon {
		width: 40px;
		height: 40px;
		background-color: #EEEEEE;
		margin-left: 5px;
		margin-right: 5px;
		border-radius: 100%;
	}
</style>